---
title: Text & Typography
order: 5
desc: Penpot's guide on custom fonts! Upload, manage, and use custom fonts in Penpot! Enhance your designs with personalised typography.
---

<h1 id="text-typo">Text & Typography</h1>

<h2 id="text">Text</h2>
<p>To insert text you have to activate the text tool by first clicking on the icon at the toolbar or pressing <kbd>T</kbd>. Then you have two ways to create a text layer:</p>
<ol>
  <li><strong>Click</strong> to create a textbox without any specific dimensions.</li>
  <li><strong>Drag</strong> to create a textbox with a fixed size.</li>
</ol>
<figure>
  <video title="Create text" muted="" playsinline="" controls="" width="auto" poster="/img/objects/text-create.webp" height="auto">
    <source src="/img/objects/text-create.mp4" type="video/mp4">
  </video>
</figure>
<p><strong>Tips for resizing</strong></p>
<ul>
  <li>Double-click on the right side of the bounding box to set the resize setting to auto-width.</li>
  <li>Double-click on the bottom side of the bounding box to set the resize setting to auto-height.</li>
</ul>
<h4>Edit and style text content</h4>
<p>Press <kbd>Enter</kbd> with a text layer selected to start editing the text content. You can style parts of the text content as rich text.</p>
<figure>
  <img src="/img/objects/text-edit.webp" alt="editing text">
</figure>
<h3>Text options</h3>
<figure>
  <img src="/img/objects/text-options.webp" alt="text options">
</figure>
<ol>
  <li><strong>Font family.</strong> Penpot includes by default the <a href="https://fonts.google.com/" target=”_blank”>Google Fonts</a> cataloge. You can also <a href="/user-guide/designing/text-typo/#custom-fonts">install your own fonts</a>.</li>
  <li><strong>Font size.</strong></li>
  <li><strong>Font type.</strong></li>
  <li><strong>Line height</strong> (in pixels).</li>
  <li><strong>Letter spacing</strong> (in pixels).</li>
  <li><strong>Text case:</strong> none, uppercase, lowercase, titlecase.</li>
  <li><strong>Horizontal alignment:</strong> left, center, right, justify.</li>
  <li><strong>Sizing:</strong> auto height, auto width, fixed size.</li>
  <li><strong>Vertical alignment:</strong> top, center, bottom.</li>
  <li><strong>Decoration:</strong> none, underline, strikethrough.</li>
  <li><strong>Direction:</strong> LTR (left to right), RTL (right to left).</li>
</ol>

<h2 id="rtl-support">RTL support</h2>
<p>Diversity and inclusion is a major Penpot concern and that's why we love to give support to RTL languages, unlike most design tools.</p>
<p>If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.</p>
<figure>
  <img src="/img/layers/layers-rtl.webp" alt="RTL support">
</figure>

<h2 id="custom-fonts">Custom fonts</h2>
<p>If you have purchased, personal or libre fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team. <p>

<h3 id="customfonts-upload">Upload local fonts</h3>
<p>To use a font that you have on your local machine, first you need to upload it to the Penpot team where you want to use it.</p>
<p>You can find the “Fonts” section in the dashboard menu, at the left sidebar.</p>
<p><a href="/img/customfonts.png" target="_blank"><img src="/img/customfonts.png" alt="local fonts" /></a></p>

<h4>To upload a local font:</h4>
<ol>
<li>Press “Add custom font”.</li>
<li>Inspect your local files to select one or more fonts that you want to upload. <strong>You can upload fonts with
the following formats: TTF, OTF and WOFF</strong>. Only one format will be needed.</li>
<li>Change the font name if needed. The font name is the name that will be shown in the font list at the workspace.
It is also what Penpot uses to group fonts in families. You can always edit it later.</li>
<li>Once ready, press upload. That's it. The font will be available at the font list of this team’s files.</li>
</ol>
<p><a href="/img/customfonts-upload.png" target="_blank"><img src="/img/customfonts-upload.png" alt="local fonts" /></a></p>

<h3 id="customfonts-families">Group fonts in font families</h3>
<p>Fonts with the same font family name will be grouped as a single font family. That means that at the font list that you will use at the files they will be shown as only one font with different variants available. </p>
<p>If you want to add a font variant (eg: Light) to a font family (eg: Helvetica) you only need to ensure during the upload process that it has the same font family name.</p>
<p><a href="/img/customfonts-families.png" target="_blank"><img src="/img/customfonts-families.png" alt="local fonts" /></a></p>

<h3 id="customfonts-edit">Edit custom fonts</h3>
<p>At the right side of a font family of the custom fonts list you can find a menu that allows you to edit the name of a font family and delete it.</p>

<h3 id="customfonts-using">Using custom fonts</h3>
<p>Custom fonts are added to the fonts catalog of a team and can be used at the workspace from the font list at the design sidebar.</p>
<p><img src="/img/customfonts-use.gif" alt="local fonts" /></p>

<h3>Fonts Licensing and Usage</h3>
<p>You should only upload fonts you own or have license to use in Penpot. Find out more in the Content rights section of <a href="https://penpot.app/terms" target="_blank">Penpot's Terms of Service</a>. You also might want to read about <a href="https://www.typography.com/faq" target="_blank">font licensing</a>.</p>


